<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="res/font-awesome-4.7.0/css/font-awesome.min.css">

</head>
<body>
    <div id = "app" class="flex-column">
        <!--当前播放背景-->
        <img id="appBg" src="img/cover.jpg" alt="">
        <!--头部结构-->
        <div class = "header flex-row">

            <div class = "home flex-center">
                <i class="fa fa-home " style="font-size:26px"></i>
            </div>
            <div class = "music-name flex-center">
                歌曲名
            </div>
            <div class = "share flex-center">
                <i class="fa fa-share " style="font-size:26px"></i>
            </div>
        </div>
        <!--唱片部分结构-->
        <div class = "body flex-center">
            <div class = "cover flex-center">
                <img id="coverImg" src="img/cover.jpg" alt="">
                <img id="disc" src="./img/disc.png" alt="">
            </div>

        </div>
        <!--底部区域-->
        <div class ="footer flex-column">
            <!--歌曲播放时间-->
            <div class = "time-box flex-row">
                <div class ="time-now">0:00</div>
                <div class = "time-total">3:41</div>
            </div>
            <!--进度条背景-->
            <div class ="progress-box flex-center">
                <div class = "progress-bg">
                    <!--实时进度-->
                    <div class="progress">
                    <!--滑块-->
                        <div class="thumb">

                        </div>
                    </div>
                </div>
            </div>
            <!--控制按钮-->
            <div class = "btn-box flex-row">
                <button class="btn-loop" data-event="loop">
                    <i class="fa fa-random"></i>
                </button>
                <button class="btn-prev" data-event="prev">
                    <i class="fa fa-step-backward fa-2x"></i>
                </button>
                <button class="btn-play" data-event="playOrPause">
                    <i class="fa fa-play-circle fa-3x"></i>
                </button>
                <button class="btn-next" data-event="next">
                    <i class="fa fa-step-forward fa-2x"></i>
                </button>
                <button class="btn-list" data-event="list">
                    <i class="fa fa-list"></i>
                </button>
            </div>
        </div>
    </div>

<!--歌曲列表弹层-->
    <div id ="musiclist">
    <!--关闭按钮-->
        <button class="btn-close" data-event="close">
            <i class="fa fa-times-circle" style="font-size: 1.2rem"></i>
        </button>
    <!--歌曲列表-->
        <ul class="musiclist">
            <li><i class="fa fa-music"></i>奢香夫人</li>

        </ul>
    </div>
    <span id = 'tips'>列表循环</span>
<!--    音频文件-->
    <audio id="player"></audio>

    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>